<ion-view>
  <ion-nav-title>
    <span class="title visible-xs visible-sm" ng-if="number=='current'">{{'BLOCKCHAIN.VIEW.TITLE_CURRENT'|translate}}</span>
    <span class="title visible-xs visible-sm" ng-if="number!='current'">{{'BLOCKCHAIN.VIEW.TITLE'|translate:formData}}</span>
  </ion-nav-title>

  <ion-content class="no-padding-xs" scroll="true">

    <div class="row no-padding">
      <div class="col col-15 hidden-xs hidden-sm">&nbsp;</div>

      <div class="col no-padding">

        <div class="center padding" ng-if="loading">
          <ion-spinner icon="android"></ion-spinner>
        </div>

        <!-- animate-fade-slide-in -->
        <div class="list item-text-wrap no-padding-xs" ng-if="!loading">

          <!-- header -->
          <div class="item item-text-wrap" >

            <h1 class="padding-top hidden-xs hidden-sm">
              <span ng-if="number!='current'">{{'BLOCKCHAIN.VIEW.TITLE'|translate:formData}}</span>
              <span ng-if="number=='current'">{{'BLOCKCHAIN.VIEW.TITLE_CURRENT'|translate}}</span>
            </h1>

            <h3>
              <span class="dark">
                <i class="icon ion-clock"></i>
                {{formData.medianTime | medianFromNowAndDate}}
              </span>
            </h3>

            <h3>
              <span class="dark">
                <i class="icon ion-lock-combination"></i>
                {{'BLOCKCHAIN.VIEW.COMPUTED_BY'|translate}}
              </span>
              <a class="positive"
                 ui-sref="app.wot_identity({pubkey:issuer.pubkey, uid: issuer.uid})">
                <i class="icon ion-person positive"></i>
                {{issuer.name||issuer.uid}}
                <span class="gray" ng-if="issuer.name">
                  ({{issuer.uid}})
                </span>
              </a>
            </h3>

            <h3>
              <a ng-click="openRawBlock($event)">
                <i class="icon ion-share"></i> {{'BLOCKCHAIN.VIEW.SHOW_RAW'|translate}}
              </a>
            </h3>

          </div>

          <!-- button bar-->
          <div class="item hidden-xs hidden-sm padding text-center">
            <div class="pull-right">
              <a class="button button-text button-small ink"
                 ng-class="{'button-text-positive': compactMode, 'button-text-stable': !compactMode}"
                 ng-click="toggleCompactMode()" >
                <i class="icon ion-navicon"></i>
                <b class="ion-arrow-down-b" style="position: absolute; top: -2px; left: 4px; font-size: 8px;"></b>
                <b class="ion-arrow-up-b" style="position: absolute; top: 10px; left: 4px; font-size: 8px;"></b>
                <span>{{'BLOCKCHAIN.LOOKUP.BTN_COMPACT'|translate}}</span>
              </a>
            </div>

            <!-- Allow extension here -->
            <cs-extension-point name="buttons"></cs-extension-point>
          </div>

          <span class="item item-divider">
            {{'BLOCKCHAIN.VIEW.TECHNICAL_DIVIDER' | translate}}
          </span>

          <!-- protocole -->
          <ion-item class="item-icon-left item-text-wrap" ng-if="!compactMode || $root.settings.expertMode">
            <i class="icon ion-gear-b"></i>
            {{'BLOCKCHAIN.VIEW.VERSION'|translate}}
            <span class="badge badge-stable">
              {{::formData.version}}
            </span>
          </ion-item>

          <!-- difficulty -->
          <ion-item class="item-icon-left item-text-wrap" ng-if="!compactMode || $root.settings.expertMode"
                    copy-on-click="{{::formData.powMin}}">
            <i class="icon ion-lock-combination"></i>
            {{'BLOCKCHAIN.VIEW.POW_MIN'|translate}}
            <h4 class="gray">{{'BLOCKCHAIN.VIEW.POW_MIN_HELP'|translate}}</h4>
            <span class="badge badge-stable">
              {{::formData.powMin}}
            </span>
          </ion-item>

          <!-- hash -->
          <ion-item class="item-icon-left item-text-wrap" copy-on-click="{{::formData.hash}}">
            <i class="icon ion-pound"></i>
            {{'BLOCKCHAIN.VIEW.HASH'|translate}}
            <span class="item-note hidden-xs hidden-sm dark">
              {{::formData.hash}}
            </span>
            <h5 class="visible-xs visible-sm dark">
              {{::formData.hash}}
            </h5>
          </ion-item>

          <!-- spacer -->
          <ion-item class="hidden-sm hidden-xs"></ion-item>

          <span class="item item-divider">
            {{'BLOCKCHAIN.VIEW.DATA_DIVIDER' | translate}}
          </span>

          <!-- If Empty & compact -->
          <ion-item ng-if="compactMode && formData.empty"
                    class="item-icon-left item-text-wrap">
            {{'BLOCKCHAIN.VIEW.EMPTY'|translate}}
          </ion-item>

          <!-- DU -->
          <ion-item ng-if="!compactMode || formData.dividend"
                    class="item-icon-left item-text-wrap" copy-on-click="{{::formData.dividend/100}}">
            <i class="icon ion-arrow-up-c"></i>
            <div class="col col-60">
              {{'COMMON.UNIVERSAL_DIVIDEND'|translate}}
              <h4 class="gray">{{'BLOCKCHAIN.VIEW.UNIVERSAL_DIVIDEND_HELP'|translate: {membersCount: formData.membersCount} }}</h4>
            </div>
            <span class="badge badge-balanced" ng-if="formData.dividend">
              +1 <span ng-bind-html="formData.currency|currencySymbol: {useRelative: true} "></span> / {{'COMMON.MEMBER'|translate|lowercase}}
            </span>
            <span class="badge badge-stable" ng-if="!formData.dividend">0</span>
            <span class="badge badge-secondary" ng-if="formData.dividend">+ {{formData.dividend| formatAmount: {currency: formData.currency, useRelative: false} }} / {{'COMMON.MEMBER'|translate|lowercase}}</span>
          </ion-item>

          <!-- identities -->
          <ng-if ng-if="!compactMode || formData.identitiesCount">
            <ion-item class="item-icon-left">
              <i class="icon ion-person"></i>
              <b class="ion-clock" style="position: absolute; top: 16px; left: 39px; font-size: 12px;"></b>
              {{'BLOCKCHAIN.VIEW.IDENTITIES_COUNT'|translate}}
              <span class="badge badge-balanced" ng-if="formData.identitiesCount">+{{::formData.identitiesCount}}</span>
              <span class="badge badge-stable" ng-if="!formData.identitiesCount">0</span>
            </ion-item>

            <div class="padding-bottom item-icon-left-padding item-icon-right-padding" ng-if="formData.identitiesCount">
              <ion-item ng-repeat="identity in ::formData.identities"
                        class="item-border-large item-small-height"
                        ng-include="'templates/blockchain/link_identity.html'">
              </ion-item>
            </div>
          </ng-if>

          <!-- joiners -->
          <ng-if ng-if="!compactMode || formData.joinersCount">
            <ion-item class="item-icon-left">
              <i class="icon ion-person-add"></i>
              {{'BLOCKCHAIN.VIEW.JOINERS_COUNT'|translate}}
              <span class="badge badge-balanced" ng-if="formData.joinersCount">+{{::formData.joinersCount}}</span>
              <span class="badge badge-stable" ng-if="!formData.joinersCount">0</span>
            </ion-item>

            <div class="padding-bottom item-icon-left-padding item-icon-right-padding" ng-if="formData.joinersCount">
              <ion-item ng-repeat="identity in ::formData.joiners"
                        class="item-border-large item-small-height"
                        ng-include="'templates/blockchain/link_identity.html'">
              </ion-item>
            </div>
          </ng-if>

          <!-- actives -->
          <ng-if ng-if="!compactMode || formData.activesCount">
            <ion-item class="item-icon-left">
              <i class="icon ion-person"></i>
              <b class="ion-refresh" style="position: absolute; top: 25px; left: 39px; font-size: 12px;"></b>
              {{'BLOCKCHAIN.VIEW.ACTIVES_COUNT'|translate}}
              <h4 class="gray">{{'BLOCKCHAIN.VIEW.ACTIVES_COUNT_HELP'|translate}}</h4>
              <span class="badge badge-balanced" ng-if="formData.activesCount">{{::formData.activesCount}}</span>
              <span class="badge badge-stable" ng-if="!formData.activesCount">0</span>
            </ion-item>

            <div class="padding-bottom item-icon-left-padding item-icon-right-padding" ng-if="formData.activesCount">
              <ion-item ng-repeat="identity in ::formData.actives"
                        class="item-border-large item-small-height"
                        ng-include="'templates/blockchain/link_identity.html'">
              </ion-item>
            </div>
          </ng-if>

          <!-- excluded -->
          <ng-if ng-if="!compactMode || (formData.excludedCount-formData.revokedCount)">
            <ion-item class="item-icon-left" >
              <i class="icon ion-person"></i>
              <b class="ion-close dark" style="position: absolute; top: 25px; left: 39px; font-size: 12px;"></b>
              {{'BLOCKCHAIN.VIEW.EXCLUDED_COUNT'|translate}}
              <h4 class="gray">{{'BLOCKCHAIN.VIEW.EXCLUDED_COUNT_HELP'|translate}}</h4>
              <span class="badge badge-assertive" ng-if="formData.excludedCount-formData.revokedCount">-{{::formData.excludedCount-formData.revokedCount}}</span>
              <span class="badge badge-stable" ng-if="!(formData.excludedCount-formData.revokedCount)">0</span>
            </ion-item>

            <div class="padding-bottom item-icon-left-padding item-icon-right-padding" ng-if="formData.excludedCount">
              <ion-item ng-repeat="identity in ::formData.excluded"
                        class="item-border-large item-small-height"
                        ng-include="'templates/blockchain/link_identity.html'">
              </ion-item>
            </div>
          </ng-if>

          <!-- leavers -->
          <ng-if ng-if="!compactMode || formData.leaversCount">
            <ion-item class="item-icon-left" ng-if="!compactMode || formData.leaversCount">
              <i class="icon ion-person"></i>
              <b class="ion-minus" style="position: absolute; top: 25px; left: 39px; font-size: 12px;"></b>
              {{'BLOCKCHAIN.VIEW.LEAVERS_COUNT'|translate}}
              <h4 class="gray">{{'BLOCKCHAIN.VIEW.LEAVERS_COUNT_HELP'|translate}}</h4>
              <span class="badge badge-assertive" ng-if="formData.leaversCount">-{{::formData.leaversCount}}</span>
              <span class="badge badge-stable" ng-if="!formData.leaversCount">0</span>
            </ion-item>

            <div class="padding-bottom item-icon-left-padding item-icon-right-padding" ng-if="formData.leaversCount">
              <ion-item ng-repeat="identity in ::formData.leavers"
                        class="item-border-large item-small-height"
                        ng-include="'templates/blockchain/link_identity.html'">
              </ion-item>
            </div>
          </ng-if>

          <!-- revoked -->
          <ng-if ng-if="!compactMode || formData.revokedCount">
            <ion-item class="item-icon-left">
              <i class="icon ion-person"></i>
              <b class="ion-minus-circled assertive" style="position: absolute; top: 25px; left: 39px; font-size: 12px;"></b>
              {{'BLOCKCHAIN.VIEW.REVOKED_COUNT'|translate}}
              <h4 class="gray">{{'BLOCKCHAIN.VIEW.REVOKED_COUNT_HELP'|translate}}</h4>
              <span class="badge badge-balanced" ng-if="formData.revokedCount">-{{::formData.revokedCount}}</span>
              <span class="badge badge-stable" ng-if="!formData.revokedCount">0</span>
            </ion-item>

            <div class="padding-bottom item-icon-left-padding item-icon-right-padding" ng-if="formData.revokedCount">
              <ion-item ng-repeat="identity in ::formData.revoked"
                        class="item-border-large item-small-height"
                        ng-include="'templates/blockchain/link_identity.html'">
              </ion-item>
            </div>
          </ng-if>

          <!-- cert -->
          <ng-if ng-if="!compactMode || formData.certificationsCount">
            <ion-item class="item-icon-left">
              <i class="icon ion-ribbon-a"></i>
              {{'BLOCKCHAIN.VIEW.CERT_COUNT'|translate}}
              <span class="badge badge-stable" ng-class="{'badge-positive':formData.certificationsCount}">{{::formData.certificationsCount}}</span>
            </ion-item>

            <div class="padding-bottom item-icon-left-padding item-icon-right-padding no-padding-xs" ng-if="formData.certificationsCount">
              <div ng-repeat="(key, certs) in formData.certifications"
                   class="item item-border-large item-small-height">
                <div class="row no-padding">
                  <div class="col col-center no-padding">
                    <ng-repeat ng-repeat="cert in certs">
                      <ng-include src="'templates/blockchain/link_identity.html'" onload="identity=cert.from"></ng-include>
                      <br/>
                    </ng-repeat>
                  </div>
                  <div class="col col-10 col-center gray text-center no-padding">
                    <h2><i class="icon ion-arrow-right-a" ></i></h2>
                  </div>
                  <div class="col col-40 col-center no-padding"
                       ng-include="'templates/blockchain/link_identity.html'"
                       onload="identity=certs[0].to">
                  </div>
                </div>
              </div>
            </div>
          </ng-if>

          <!-- TX -->
          <ng-if ng-if="!compactMode || formData.transactionsCount">
            <ion-item class="item-icon-left">
              <i class="icon ion-card"></i>
              {{'BLOCKCHAIN.VIEW.TX_COUNT'|translate}}
              <span class="badge badge-stable" ng-class="{'badge-positive':formData.transactionsCount}">{{::formData.transactionsCount}}</span>
            </ion-item>

            <div class="padding-bottom item-icon-left-padding item-icon-right-padding no-padding-xs" ng-if="formData.transactionsCount">
              <div ng-repeat="tx in ::formData.transactions"
                   class="item item-small-height item-border-large">
                <div class="row no-padding" style="padding-top: 3px;">
                  <div class="col col-40 col-center no-padding list no-margin">
                    <div ng-repeat="identity in ::tx.issuers" class="item no-padding item-small-height">
                      <ng-include  src="'templates/blockchain/link_identity.html'"></ng-include>
                    </div>
                  </div>
                  <div class="col col-10 col-center gray text-center no-padding">
                    <h2><i class="icon ion-arrow-right-a"></i></h2>
                  </div>
                  <!-- recipients -->
                  <div class="col no-padding padding-right no-padding-xs col-text-wrap list no-margin">
                    <span class="gray" class="gray" ng-if="tx.toHimself" translate>BLOCKCHAIN.VIEW.TX_TO_HIMSELF</span>
                    <div ng-repeat="output in ::tx.outputs" class="item no-padding item-small-height">

                      <!-- simple SIG expression -->
                      <ng-include ng-if="::output.pubkey" src="'templates/blockchain/link_identity.html'" onload="identity=output"></ng-include>

                      <!-- complex unlock condition -->
                      <span ng-if="::!output.pubkey && output.unlockFunctions">
                        <i class="icon ion-locked"></i>
                        (<a ng-click="showUnlockConditionPopover(output, $event)">
                          <i ng-repeat="unlockFunction in ::output.unlockFunctions"
                             ng-class="::{'ion-key': (unlockFunction=='SIG'), 'ion-clock': (unlockFunction=='CSV' || unlockFunction=='CLTV'), 'ion-lock-combination': (unlockFunction=='XHX') }"
                             class="icon"></i>
                        </a>)
                      </span>
                      <span class="badge badge-balanced"
                            ng-bind-html="::output.amount | formatAmount:{currency: formData.currency, useRelative: false} "></span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </ng-if>

        </div>
      </div>

      <div class="col col-15 hidden-xs"></div>
    </div>

  </ion-content>

</ion-view>
